<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-bill-container`]">
      <view class="bill-form">
        <view class="bill-form-title">预计账单 </view>
        <view class="bill-form-row" v-for="(item, index) in feeItem" :key="index">
          <view class="bill-form-label">{{ item.name_remark }} </view>
          <view class="bill-form-value"> {{ item.amount }}</view>
          <view class="bill-form-tips" v-if="item.tip_remark">{{ item.tip_remark }}</view>
        </view>
        <view class="bill-form-row">
          <view class="bill-form-label primary"> 账单合计 </view>
          <view class="bill-form-value primary"> {{ amount }}</view>
          <view class="bill-form-tips">备注：如果是续签，换房合同，支付账单时，会使用原合同剩余押金等抵扣账单费用</view>
        </view>
        <view class="bill-form-button">
          <uv-button type="primary" text="去签字" customStyle="margin-top: 10px" @click="submit"></uv-button>
        </view>
      </view>
      <!-- <iframe :src="page_url" frameborder="0"></iframe> -->
      <view class="bill-check">
        <uv-checkbox-group v-model="checkboxValue" shape="circle" @click.stop="handleDetail">
          <uv-checkbox :activeColor="theme" :customStyle="{ marginBottom: '8px' }" name="name"
            >请阅读并同意<span class="certificate" @click.stop="handleDetail">《数字证书使用协议》</span>及授权向上上签提供个人信息以实现在线签约</uv-checkbox
          >
        </uv-checkbox-group>
        <view class="bill-check-tips">
          我们使用上上签技术为您提供在线签约的身份核验和数字证书认证，为实现这一目的，我们将向上上签提供您的姓名，身份证信息，人脸信息和签约信息，您如果拒绝将无法使用在线签约。
        </view>
      </view>
      <popupRecognition ref="ref-popupRecognition"></popupRecognition>
    </view>
  </cu-layout>
</template>

<script>
import popupRecognition from '@/pages/components/popupRecognition.vue'
import { mapActions, mapGetters } from 'vuex'
import { signBill } from './api'
export default {
  name: 'componentName',
  components: {
    popupRecognition,
  },
  mixins: [],
  props: {},
  data() {
    return {
      amount: 0,
      feeItem: [],
      checkboxValue: [],
      page_url: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    const { page_url } = this.$Route.query
    this.page_url = page_url
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await signBill({ id })
      uni.stopPullDownRefresh()
      const { amount, feeItem } = data
      this.amount = amount || 0
      this.feeItem = feeItem || []
    },
    handleDetail() {
      const { page_url } = this.$Route.query
      this.$ROUTE.go(page_url)
    },
    async submit() {
      if (this.checkboxValue.length === 0) {
        uni.$uv.toast('请阅读并同意《数字证书使用协议》')
        return
      }
      this.$refs['ref-popupRecognition'].handleOpen({ scene: 'bill' })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('bill-container')} {
  position: relative;
  background: #f5f5f5;
  box-sizing: border-box;
  overflow: hidden;
  .bill-form {
    .primary {
      color: $uv-primary;
    }
    box-sizing: border-box;
    margin: 15px;
    background: white;
    .bill-form-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      padding: 20px 0;
      border-bottom: 1px solid #e5e5e5;
    }
    .bill-form-row {
      margin: 0 15px;
      padding: 20px 0;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e5e5e5;

      .bill-form-value {
        margin-left: auto;
      }
      .bill-form-tips {
        flex-basis: 100%;
        font-size: 10px;
        margin-top: 5px;
        color: #999999;
      }
    }
    .bill-form-button {
      padding: 20px 100px;
    }
  }
  .bill-check {
    width: calc(100% - 30px);
    box-sizing: border-box;
    margin: 15px;
    padding: 15px 0;
    font-size: 10px;
    .certificate {
      color: $uv-primary;
      display: contents;
    }
    ::v-deep .uv-checkbox {
      width: 100%;
      // color: $uv-primary;
    }
    .bill-check-tips {
      margin: 0px 20px;
    }
  }
}
</style>
